import React, { useState } from "react";
import PropTypes from "prop-types";
import { FieldTimeOutlined, FieldNumberOutlined, FolderOpenOutlined } from '@ant-design/icons'
import { Card, Divider } from "antd";
import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
import CountTo from 'react-count-to'
import { formatStamp } from '../../../filters/index'

const renderer = new marked.Renderer();
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  sanitize:false,
  xhtml: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }

}); 
// console.log(formatStamp)
const blogListItem = props => {
  const [blogItem, setBlogItem] = useState(props.blogItem);
  // console.log('====================================');
  // console.log(blogItem);
  return (
    <div>
      <Card
        hoverable
        cover={
          <img
            alt="example"
            style={{height:300}}
            src={blogItem.articleImg?blogItem.articleImg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=225264473,1817553437&fm=26&gp=0.jpg'}
          />
        }
      >
        {/* <h4>{blogItem.title}</h4> */}
        <div className="list-info">{"标题："+blogItem.title}</div>
        <div className="list-info">&nbsp;{  "简介："+blogItem.introduce}</div>
        {/* <div dangerouslySetInnerHTML={{__html:marked(blogItem.article_content)}} style={{height:"120px"}} className="list-info list-context"></div> */}
        <div className="list-info list-footer">
          <span> <FieldTimeOutlined />{ formatStamp(blogItem.addTime) } </span>
          <span> <FolderOpenOutlined />{ blogItem.typeName } </span>
          <span> <FieldNumberOutlined /><CountTo to={blogItem.view_count} speed={1500} /> 人 </span>
        </div>
      </Card>
    </div>
  );
};

blogListItem.propTypes = {
  blogItem: PropTypes.object.isRequired
};
export default blogListItem;
